<template>
  <img id="my-music" src="/public/my_music_bg.jpg" alt="" />
  <section id="contentArea">
    <aside id="aside">
      <div id="avaterBox">
        <el-avatar id="avater" :icon="UserFilled" />
      </div>
      <p>姓名</p>
    </aside>
    <article id="tabs">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="我的喜欢" name="first">
          <MusicList />
        </el-tab-pane>
        <el-tab-pane label="最近播放" name="second">
          <MusicList />
        </el-tab-pane>
      </el-tabs>
    </article>
  </section>
  <FooterFix />
</template>

<script setup>
import { ref } from 'vue'
import MusicList from '../components/common/MusicList.vue'
import { UserFilled } from '@element-plus/icons-vue'
import FooterFix from '../components/common/FooterFix.vue'

const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>

<style scoped>
#avater {
  width: 100%;
  height: 100%;
}
#avaterBox {
  width: 80%;
  aspect-ratio: 1/1;
  margin: 0 10% 10% 10%;
}
#tabs {
  width: 75%;
  box-sizing: border-box;
  padding: 0 0 0 5%;
  /* background-color: aqua; */
}
#aside {
  width: 20%;
  height: 300px;
  /* background-color: bisque; */
  text-align: center;
  transform: translateY(-25%);
}
#contentArea {
  width: 88%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
}
#my-music {
  width: 100%;
  /* height: 240px; */
}
</style>
